<template>
  <z-box>
    <z-title name="下拉列表滚动加载"></z-title>
    <el-select v-model="val" v-select-scroll="handleScroll" clearable style="margin-top: 10px;"
      placeholder="请选择" ref="scrollSelect">
      <el-input style="margin: 5px;width: calc(100% - 10px);" type="text" size="small" v-model="queryKeyword" @keydown.enter.native="search"
        placeholder="回车搜索"></el-input>
      <el-option v-for="(item,key) in dataList" :key="key" :label="item.name" :value="item.value">
      </el-option>
      <!-- <div v-if="loading" style="text-align: center"><i class="el-icon-loading"></i></div> -->
    </el-select>
  </z-box>
</template>

<script>
export default {
  data() {
    return {
      val: '',
      loading: false,
      queryKeyword: '',
      dataList: [],
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        totalPage: 5
      }
    }
  },
  watch: {
    // 这里监听获取到数据渲染后，处理加载文字DOM节点
    dataList: {
      handler (val) {
        if (val.length) {
          this.$nextTick(() => {
            // let el = this.$refs.scrollSelect.$el
            let el = document
            const bodyWrap = el.querySelector('.el-select-dropdown__wrap')
            let loadDiv = el.createElement('div')
            loadDiv.className = 'load-text'
            loadDiv.style.textAlign = 'center'
            loadDiv.style.display = 'none'
            const loadTextDom = el.querySelectorAll('.el-select-dropdown__wrap .load-text')
            // 未添加节点时添加
            if (!loadTextDom.length) {
              loadDiv.innerHTML = this.page.totalPage > 1 ? '努力加载中(>ω<*)' : '人家是有底线的 (｡･ω･｡)'
              bodyWrap.appendChild(loadDiv)
            }
            // 已生成节点时处理
            if (loadTextDom.length) {
              const loadText = el.querySelector('.el-select-dropdown__wrap .load-text')
              loadText.style.display = 'none'
              loadText.innerHTML = this.page.totalPage > 1 ? '努力加载中(>ω<*)' : '人家是有底线的 (｡･ω･｡)'
            }
          })
        }
      }
    },
    deep: false
  },
  mounted () {
    this.search()
  },
  methods: {
    handleFocus() {
      // select 获取焦点时，重置参数
      // this.queryKeyword = "";
      // this.dataList = [];
      // this.getDataList();
    },
    handleScroll(param) {
      /*
        * 处理滚动行为
        * param: 滚动行为
        *  true 向下滚动
        *  false 向上滚动
        */
      // console.log(param)
      // 此处判断 !this.queryKeyword 是防止在搜索关键词的结果上追加数据
      // 在后台判断关键词长度，至少要输入2个关键字，才可搜索
      // 否则，还是会出现查询时间长的情况
      if (param && !this.queryKeyword) {
        // 请求下一页数据
        if (!this.loading) {
          let loadDiv = document.querySelector('.el-select-dropdown__wrap .load-text')
          loadDiv.style.display = 'block'
          this.page.current++
          // 大于总页数时
          if (this.page.current > this.page.totalPage) {
            loadDiv.innerHTML = '人家是有底线的 (｡･ω･｡)'
            return
          }
          this.getDataList()
        }
      }
    },
    search() {
      this.dataList = []
      this.page.current = 1
      this.getDataList()
    },
    getDataList() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        const dataList = []
        for (let index = 0; index < 10; index++) {
          const element = {
            value: 'xx' + this.dataList.length + index,
            name: `王小虎${this.page.current}-${index}`
          }
          dataList.push(element)
        }
        this.dataList = this.dataList.concat(dataList)
      }, 500);
    }
  }
}
</script>

<style>

</style>